<!-- 课程详情 -->
<!-- edit to 2023-01-07 =====>
视频记录埋点，下次打开接着上次的位置播放 -->
<template>
	<view :class="['content', current ? '' : 'act_bgf']">
		<!-- #ifdef APP-PLUS -->
		<view style="height:0rpx;"></view>
		<!-- #endif -->
		<view class="top" :style="{marginTop:offsetHeight*2+'rpx'}">
			<view class="video" :class="scrollTop?'top':'top'"
				v-if="info.coursePrice == 0 || info.isBuy==1 ||info.isFree == 2">
				<vPlyaer v-if='info.courseResourceAddress' :src="info.courseResourceAddress" :courceId='info.id'
					:initialTime="videoInitialTime"
                         :poster="info.courseResourceAddress+'?x-oss-process=video/snapshot,t_0,f_jpg'"></vPlyaer>
				<image v-else class="cover" :src="info.coverImg" mode="aspectFit"></image>
			</view>
			<image v-else class="cover_img" :src="info.coverImg" mode="widthFix"></image>
		</view>
		<view class="title_box" :class="[!flag ? 'border_bottom' : '']">
			<text>{{ info.resourceName }}</text>
		</view>
		<!-- 未购买时默认展开免费课程或已买课程默认收起 -->
		<view class="introduce" v-show="flag">
			<view class="">{{ info.courseIntroduction || '暂无简介' }}</view>
			<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/topDown.png" mode=""></image>
		</view>
		<!-- 主要部分 -->
		<view class="couseBox">
			<block v-if="current">
				<view class="teacher">
					<view class="user" @click="seriesList(info.lecturerId,info.courseId)" v-show="showTeacher">
						<view class="avatar">
							<avatar class="" :src="info.lecturerHead"></avatar>
						</view>
						<view class="right">
							<view class="fristBox">
								<view>{{ info.lecturerName }}</view>
								<view v-if="info.lecturerLabel" class="right1">{{ info.lecturerLabel }}</view>
							</view>
							<view class="secondBox">{{ info.lecturerIntroduction }}</view>
						</view>
					</view>
				</view>
				<view class="seriesCourses">
					<view class="verial" @click="showSeries=!showSeries">
						系列课程
						<view class="right-flex">
							<text style="font-size: 26rpx;color: #888;">{{showSeries?'收起':'展开'}}</text>
							<image src="/static/images/rightDown.png" :class="['row-img',showSeries?'row-t':'row-b'] "
								mode="widthFix"></image>
						</view>
					</view>
					<scroll-view scroll-x="true" class="list_ul" v-if="showSeries">
						<view class="list_li" v-for="item in resouList"
						v-if="item.id != id"
						v-show="showSeries"
						 @click='courseItem(item.id)'
						:key="item.id">
							<view class="li_block">
								<view class="li_img_view">
									<image class="li_img" :src="item.coverImg" mode="aspectFill"></image>
								</view>
								<view class="li_title">
									<view class="title">{{item.resourceName}}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- 课程图文和课程附件 -->
				<view class="centerBox" v-if="info.coursePrice == 0 || info.isBuy==1 ||info.isFree == 2">
					<!-- 课程图文 -->
					<view class="graphic">
						<view class="verial">课程图文</view>
						<view class="box" v-if='info.couseContent'>
							<rich-text :nodes="info.couseContent" @itemclick="elClick" space='nbsp'></rich-text>
							<view id="courseGraphicEndTracingPoint"> 这是结束描点 </view>
						</view>
						<view class="box" v-else>
							暂无数据
						</view>
					</view>
					<!-- 课程附件 -->
					<view class="attachment" v-if='info.fileUrl'>
						<view class="verial">课程附件</view>
						<view class="tool" v-if="info.fileUrl">
							<view class="att_box" v-for='(item,index) in info.file' :key='index'
								@click="prviewFile(item)">
								<image
									v-if="item.suffix=='doc'||item.suffix=='docx'||item.suffix=='pdf'||item.suffix=='xlsx'"
									:src="`https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/common/${item.suffix}.png`">
								</image>
								<image v-else
									:src="`https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/common/other.png`"></image>
								<view class="att_name">
									<view class="be">
										{{item.name}}
									</view>
									<view class="af">
										.{{item.suffix}}
									</view>
								</view>
							</view>
						</view>
						<view v-else class="tool">暂无附件</view>
					</view>
				</view>
				<!-- 推荐课程 -->
				<view class="recommend" v-if='recomList.length > 0'>
					<view class="verial">关联课程</view>
					<view class="box" v-if='recomList.length'>
						<view class="item" v-for="(item, index) in recomList" :key="index" @click='recomItem(item)'>
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/book.png" mode=""></image>
							<view class="text">{{ item.resourceName }}</view>
						</view>
					</view>
					<view class="box1" v-else>暂无数据</view>
				</view>
			</block>
			<block v-else>
				<view class="discuss">
					<view class="verial">课堂讨论</view>
					<Discuss class="discuss_box" :list="discussList" @isGreat="isGreat" @sendCom="sendCom"
						@relayUser="relayUser" @openRelay="openRelay"></Discuss>
					<u-loadmore :status="status" />
				</view>
			</block>
		</view>

		<!-- 底部按钮 -->
		<Bottom @discussion="discussion">
			<template #left>
				<view class="icon_flex_infront">
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/Discuss.png" mode=""></image>
					{{ current ? '课堂讨论' : '课程详情' }}
				</view>
			</template>
			<template #right>
				<view class="NoBuy" v-if="info.coursePrice>0 && info.isBuy == 0 && info.isFree==1 && isShowMoney"
					@click="settlement">
					<text>永久可学</text>
					<view class="flexed">
						<view class="box">
							<text>原价：</text>
							<view class="price1">
								<text>￥</text>
								<view class="">{{ info.coursePrice }}</view>
							</view>
						</view>
						<view class="box">
							<text>会员价:</text>
							<view class="price2">
								<text>￥</text>
								<view class="">{{ info.coursePriceZk }}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="bottom_buttonGroup">
					<view class="iconBox">
						<view class="icon_flex" @click="goToImprove">
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/Test.png" mode=""></image>
							<text>{{ info.testId == 0 ? '暂无测试内容' : '随堂小测' }}</text>
						</view>
						<view class="icon_flex" @click="zan">
							<image v-if="info.isGreat == 0"
								src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/Like.png" mode=""></image>
							<image v-else src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/Like.png" mode="">
							</image>
							<text :class="info.isGreat == 1 ? 'act' : ''">{{ info.greatNum }}</text>
						</view>
						<view class="icon_flex" @click="collection">
							<image v-if="info.isCollect == 0"
								src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/Collect.png" mode=""></image>
							<image v-else src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/Collect.png" mode="">
							</image>
							<text :class="info.isCollect == 1 ? 'act' : ''">{{ info.isCollect == 0 ? '收藏' : '已收藏' }}</text>
						</view>
						<view class="icon_flex" @click="share">
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/Share.png" mode=""></image>
							<text>分享</text>
						</view>
					</view>	
				</view>	
			</template>
		</Bottom>
		<!-- 分享 -->
		<share-popup @cancel="shareShow = false" :show="shareShow" :shareDate="shareDate" :custom="0"></share-popup>
		<!-- 发讨论 -->
		<u-popup :show="isShow" :round="10" @close="isShow = false">
			<view class="replyPopup">
				<view class="inputbg">
					<u--input type="text" v-model="content" class="inpt" border="none" placeholderClass="placeholder"
						:autoBlur="true" :focus="isShow" :placeholder="placeholder"></u--input>
				</view>
				<text @click="sendComment">发送</text>
			</view>
		</u-popup>
		<!-- 零元购买系列弹出层 -->
		<zero-buy :isShow='zeroShow' :isAloneBuy="true" @buyOne='buyOne' @zeroBuy='zeroBuy'></zero-buy>
		<!-- 补差价购买系列copy -->
		<zero-buy :isShow='copyShow' :isSerivers="true" @aloneBuy='aloneBuy' @baleBuy='baleBuy'
			:costPerice='info.payTotalMoney' :withPerice='info.diffMoney'></zero-buy>
	</view>
</template>

<script>
	import {
		courseDetail,
		addOrClean,
		parentComment,
		childComment,
		addGreat,
		addComment,
		resourceList,
		shareAdd,
		addReadNum,
		recommentCourse,
		getUserData,
		createOrder,
	} from '@/apis/apis.js';
	import Bottom from '../modules/bottomBtn.vue';
	import sharePopup from '@/components/share.vue';
	import avatar from '@/components/avatar.vue';
	import Discuss from '../modules/discuss.vue';
	import vPlyaer from '@/components/vPlayer/vPlayer.vue';
	import Header from '@/components/c_header.vue'
	import ZeroBuy from '@/components/zeroBuy/zeroBuy.vue'
	import successPopup from '@/components/successPopup.vue'
	import {
		throttle
	} from '@/utils/date.js'
	export default {
		components: {
			Bottom,
			sharePopup,
			avatar,
			Discuss,
			vPlyaer,
			Header,
			ZeroBuy,
			successPopup
		},
		data() {
			return {
				id: '',
				info: {}, //基础信息
				recomList: [],
				addReadTimer: null, // 超过10秒增加阅读量
				play: false, // 是否开始播放
				flag: true, //打开或关闭简介
				shareShow: false, //分享弹窗
				current: true, //切换课程讨论
				isShow: false, //发送评论弹出
				content: '', // 发评论
				placeholder: '',
				comItem: null,
				pageNum: 1, // 第几页
				pageSize: 10, // 每页数量
				discussList: [], //评论列表
				status: 'nomore',
				loadStatus: true,
				shareDate: null,
				isTestscore: false, //试题做完返回课程详情页面
				zeroShow: false, //零元购买弹出层
				copyShow: false, //补差价购买
				user: null, //用户会员
				popupShow: false, //购买成功弹窗
				showBuy: false, //支付弹窗
				payType: null, //支付方式
				offsetHeight: null, //导航栏容器高度
				showTeacher: false,
				showSeries:true,
				videoInitialTime: 0, //视频的起始播放位置s
				phoneHeight: null, //屏幕高度px
				alredyReport: false, //是否已上报图文完播
				scrollTop: false,
				isShowMoney: false,
				isios: false,

				// 系列课程
				resouList:[],
			};
		},
		// 页面滚动检测
		onPageScroll(e) {
			if (e.scrollTop > 0) {
				this.scrollTop = true
			}
			// console.log(e,"滚动值")
		},
		onLoad(options) {
			this.id = options.id ? options.id : '';
			this.isTestscore = options.isTestscore ? options.isTestscore : false
			uni.getSystemInfo({
				success: (res) => {
					// 注意这里获得的高度宽度都是px，需要转换rpx
					// this.phoneHeight = (res.windowHeight * (750/res.windowWidth))
					this.phoneHeight = res.windowHeight
					console.log(this.phoneHeight)
				}
			})

			let that = this
			uni.getSystemInfo({
				success: function(res) {
					if (res.platform == 'ios') {
						that.isios = true
					}
				}
			})
		},
		onShow() {
			this.init();
		},
		onPageScroll() {
			if (!this.phoneHeight) return
			this.pageScrollListener()
		},
		mounted() {
			// 增加阅读量
			this.addNum();
			//获取顶部导航栏高度
			// this.offsetHeight = this.$refs.headerHeight.$el.offsetHeight
		},
		methods: {
			//跳转课程详情页
			courseItem(id) {
				// 传课程id
				uni.redirectTo({
					url: '/pages/index/courseItem/courseItem?id=' + id
				})
			},
			async getResourceList() {
				const list = await resourceList({
					// pageNum: 1,
					// pageSize: 10,
					courseId: this.info.courseId,
					type: 1, // 获取位置（0：首页，1：系列课程）
				})
				this.resouList = list.data;
			},
			// 富文本内容点击
			elClick(e) {
				if (e.detail.node.name == 'a') {
					uni.navigateTo({
						url: '/pages/outsideLink/outsideLink?url=' + encodeURIComponent(e.detail.node.attrs.href)
					})
				}
			},
			// 查看附件
			prviewFile(data) {
				console.log(data.url)
				uni.downloadFile({
					url: data.url,
					success: (res) => {
						console.log(res, 'res');
						uni.openDocument({
							filePath: res.tempFilePath,
							success: (open) => {
								console.log('打开文档成功')
							}
						})
					}
				})
			},
			back() {
				if (this.isTestscore) {
					uni.switchTab({
						url: '../index'
					})
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
			},
			init() {
				this.info = {}
				courseDetail(this.id).then(res => {
					console.log('课程详情', res);
					this.getUserDataApi()
					res.data.file = []
					if (res.data.fileName) {
						res.data.fileName = res.data.fileName.split(',')
						res.data.fileUrl = res.data.fileUrl.split(',')
						res.data.fileName.forEach((el, index) => {
							res.data.file.push({
								name: el.substring(0, el.lastIndexOf(".")),
								url: res.data.fileUrl[index],
								suffix: el.substring(el.lastIndexOf(".") + 1)
							})
						})
					}
					if (res.data.couseContent) {
						res.data.couseContent = res.data.couseContent.replace(/\<p>/g,
							'<p style="word-break: break-all;">')
						res.data.couseContent = res.data.couseContent.replace(/\<img /g,
							'<img style="max-width:100%;"')
					}
					if (res.data.isBuy == 1) {
						this.flag = false;
					}
					if (res.data.flag && this.isios) {
						this.isShowMoney = false
					} else {
						this.isShowMoney = true
					}
					this.info = res.data;
					this.getResourceList();
					console.log('课程信息', this.info)
					this.getRecomList(res.data.recommends)
					// 获取本地存储的视频信息
					this.getLocalVideoRecord()
					//testId 测试题id【为0表示没有测试题】
					//isBuy	用户是否购买改课程【0：未购买、1：已购买】
				});
			},
			// 获取推荐
			getRecomList(recommends) {
				recommentCourse({
					recommends
				}).then(res => {
					console.log('获取推荐', res);
					if (res.data) {
						this.recomList = res.data
					}
				})
			},
			//跳转随堂小测
			goToImprove() {
				if (this.info.testId == 0) return;
				uni.navigateTo({
					// 传课程id
					url: '../improve/improve?id=' + this.info.id
				});
			},
			// 增加阅读量
			addNum() {
				// 浏览10s后增加阅读量
				this.addReadTimer = setTimeout(() => {
					addReadNum({
						resourceId: this.id
					}).then(res => {
						console.log(res);
						clearTimeout(this.addReadTimer)
						this.addReadTimer = null
					});
				}, 1000 * 10);
			},
			// 点赞
			zan() {
				addGreat({
					objectId: this.info.id,
					objectType: 0
				}).then(res => {
					// console.log(res);
					if (res.code == 200) {
						if (this.info.isGreat == 0) {
							this.info.greatNum++;
							this.info.isGreat = 1
						} else {
							this.info.isGreat = 0
							this.info.greatNum--;
						}
					}
				})
			},
			//收藏
			collection() {
				addOrClean({
					objectId: this.id,
					objectType: 0
				}).then(res => {
					if (res.code == 200) {
						this.info.isCollect = !this.info.isCollect;
					}
				});
			},
			//课程推荐跳转详情
			recomItem(item) {
				if (item.id == this.id) {
					return
				}
				uni.navigateTo({
					url: '/pages/index/courseItem/courseItem?id=' + item.id
				})
			},
			// 获取评论
			async getCommentList() {
				const res = await parentComment({
					objectId: this.id,
					objectType: 0,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					searchType: 1
				});
				res.data.forEach(el => {
					if (el.commentNum > 0) {
						el.open = false;
						el.relays = [];
					}
				});
				console.log('评论', res);
				if (res.data.length < this.pageSize) {
					this.status = 'nomore';
				} else {
					this.status = 'loadmore';
				}
				this.discussList = this.discussList.concat(res.data);
				this.$forceUpdate();
			},
			//跳转结算页
			settlement() {
				console.log(this.info);
				if (this.info.diffMoney == 0) {
					this.zeroShow = true
					return
				}
				// else {
				// 	this.copyShow=true
				// 	return
				// }
				const vip = this.user.vipEndDay
				let price = vip ? this.info.coursePriceZk : this.info.coursePrice
				//如果price大于差价diffMoney，就打包购买，小于的话就直接跳转结算页
				if (price > this.info.diffMoney && this.info.diffMoney !== 0) {
					this.copyShow = true
					return
				} else {
					uni.navigateTo({
						url: `../settlement/settlement?type=${2}&courseId=${this.info.courseId}&chapterId=${this.info.id}`
					});
				}

			},
			// 零元购单独购买
			buyOne() {
				console.log('单独购买');
				uni.navigateTo({
					url: `../settlement/settlement?type=${2}&courseId=${this.info.courseId}&chapterId=${this.info.id}`
				});
				this.zeroShow = false
			},
			//用户是否会员
			getUserDataApi() {
				getUserData().then(res => {
					// console.log('用户信息',res)
					this.user = res.data
				})
			},
			// 0元 购买系列
			buySeries(payMoney, totalMoney, flag = false) {
				let that = this
				const vip = this.user.vipEndDay
				const plat = uni.getSystemInfoSync().platform
				let data = {
					courseName: this.info.courseName,
					isMember: vip > 0 ? 1 : 0, // 会员
					orderSource: plat == 'ios' ? 2 : 1,
					orderType: 1, // 1系列 2课程 3会员
					payMoney,
					totalMoney,
					spellFlag: 0, // 拼单 0 否 1 是
					courseId: this.info.courseId,
					// coverImg: this.info.coverImg
				}
				console.log(data)
				createOrder(data).then(res => {
					console.log('订单信息', res)
					this.orderCode = res.data
					this.copyShow = false
					this.zeroShow = false
					//补差价购买支付弹出层
					if (flag) {
						this.showBuy = true
					}
					this.init()
				})
			},
			//零元购0元购买系列
			zeroBuy() {
				console.log('0元购买');
				this.buySeries(0, 0)
			},
			//单独购买
			aloneBuy() {
				console.log('单独购买');
				uni.navigateTo({
					url: `../settlement/settlement?type=${2}&courseId=${this.info.courseId}&chapterId=${this.info.id}`
				});
				this.copyShow = false
			},
			//补差价购买
			baleBuy() {
				console.log('补差价');
				uni.navigateTo({
					url: `../settlement/settlement?type=${1}&courseId=${this.info.courseId}`
				});
				this.copyShow = false
			},

			//分享
			share() {
				console.log(this.info);
				this.shareShow = true;
				this.shareDate = {
					serviceId: this.info.id, // 业务id
					title: this.info.resourceName,
					summary: this.info.lecturerIntroduction || this.info.lecturerName,
					imageUrl: this.info.coverImg,
					memberId: uni.getStorageSync('USER_DATA').memberId, //用户id
					type: 0, //0	图文 1	纯文字 2	纯图片 3	音乐 4	视频 5	小程序
					objectType: 0, // 0课程 1话题 2拼单
				};
			},
			// 展开或隐藏简介
			handlerIntro() {
				this.flag = !this.flag;
			},
			//点击讲师介绍跳转列表
			seriesList(v, courseId) {
				uni.navigateTo({
					url: '../seriesList/seriesList?lecturerId=' + v + '&seriesId=' + courseId
				});
			},
			// 课堂讨论
			discussion() {
				this.current = !this.current;
				this.flag = false;
				this.pageNum = 1;
				this.discussList = [];
				this.getCommentList();
			},
			// 评论点赞
			isGreat(id, index) {
				addGreat({
					objectId: id,
					objectType: 2
				}).then(res => {
					console.log(res);  
					if (res.code == 200) {
						if (this.discussList[index].greatFlag == 0) {
							this.discussList[index].greatNum++; 
						} else {
							this.discussList[index].greatNum--;
						}
						this.discussList[index].greatFlag = !this.discussList[index].greatFlag;
					}
				});
			},
			// 发评论
			sendCom(e) {
				const boo = this.info.coursePrice == 0 || this.info.isBuy == 1
				if (!boo) {
					uni.showToast({
						title: '请先购买课程',
						icon: 'none'
					})
					return
				}
				console.log(boo)
				this.comItem = e;
				if (!e) {
					this.placeholder = '发起讨论';
				} else {
					this.placeholder = '回复`' + e.nickName + '：`';
				}
				this.isShow = true;
			},
			// 发评论
			sendComment() {
				let data = {};
				if (!this.comItem) {
					data = {
						content: this.content,
						objectId: this.info.id,
						objectType: 0
					};
				} else {
					data = {
						content: this.content,
						objectId: this.info.id,
						objectType: 0,
						pid: this.comItem.id,
						replyMemberId: this.comItem.memberId
					};
				}
				console.log(data);
				addComment(data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '发送成功',
							icon: 'none'
						});
						this.isShow = false;
						this.content = '';
						this.discussList = [];
						this.getCommentList();
					}
				});
			},
			// 展开回复
			openRelay(type, v, idx) {
				if (type == 'open') {
					console.log(v, idx);
					childComment({
						pageNum: 1,
						pageSize: v.commentNum,
						pid: v.id
					}).then(res => {
						console.log(res);
						this.discussList[idx].relays = res.data;
						this.discussList[idx].open = true;
					});
				} else {
					this.discussList[idx].open = false;
				}
			},
			//获取本地存储的视频播放数据，判断该视频的播放时间位置
			getLocalVideoRecord() {
				let localVideoRecord = null
				let localSaveVideoList = []
				if (uni.getStorageSync('localSaveVideoList')) {
					localSaveVideoList = JSON.parse(uni.getStorageSync('localSaveVideoList'))
				}
				localSaveVideoList.forEach(v => {
					// 如果已有历史数据
					if (v.courceId === this.info.id && v.vidoeSrc === this.info.courseResourceAddress) {
						localVideoRecord = v
					}
				})
				this.videoInitialTime = localVideoRecord && localVideoRecord.duration || 0
				// console.log('找到本地视频：',localVideoRecord,this.info,localSaveVideoList)
			},
			// 通过滚动判断图文是否完播
			pageScrollListener() {
				if (this.alredyReport) return
				this.$u.getRect('#courseGraphicEndTracingPoint').then(rect => {
					console.log(rect, this.phoneHeight);
					let rectTop = rect.top || 0
					// 触发完播，调接口告诉后端图文完播
					if (rectTop < this.phoneHeight) {
						// ....  此部分暂定，没有图文读完接口
						this.alredyReport = true
					}
				})
			}
		},
		onUnload() {
			if (this.addReadTimer) {
				clearTimeout(this.addReadTimer)
				this.addReadTimer = null
			}

		},
		onReachBottom() {
			if (!this.current) {
				console.log(123)
				if (this.status == 'nomore') return;
				this.status = 'loading';
				setTimeout(() => {
					this.pageNum++;
					this.getCommentList();
				}, 1300);
			}
		}
	};
</script>

<style scoped lang="scss">
	.verial {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #303030;
		height: 40rpx;
		margin: 36rpx 0 28rpx 0;
		padding-left: 24rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.right-flex {
		display: flex;
		align-items: center;
	}
	
	.row-img {
		width: 16rpx;
		margin-left: 10rpx;
	}

	.row-t {
		transform: rotate(-90deg);
	}

	.row-b {
		transform: rotate(90deg);
	}

	.verial::before {
		content: '';
		position: absolute;
		width: 10rpx;
		height: 26rpx;
		background: #194FC9;
		border-radius: 4rpx;
		transform: translateY(-50%);
		top: 50%;
		left: 0;
	}

	.content {
		width: 100%;
		height: auto;
		background: #f8f8f8;

		.pay {
			padding: 68rpx 44rpx 70rpx 34rpx;

			.btn {
				background: #52a3ff;
				box-shadow: 0px 12rpx 16rpx 0px rgba(82, 163, 255, 0.3);
				border-radius: 46rpx;
				font-size: 30rpx;
				font-family: PingFangSC;
				font-weight: 400;
				color: #ffffff;
				width: 636rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				margin: 128rpx auto 0;
			}

			.info {
				text-align: center;
				margin-bottom: 112rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;

				text {
					font-size: 40rpx;
					font-family: Adobe Heiti Std;
					font-weight: bold;
					margin-left: 22rpx;
				}
			}

			.m78 {
				margin-top: 78rpx;
			}

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;

				.left {
					display: flex;

					image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 22rpx;
					}
				}
			}
		}

		.video {
			width: 100%;
			height: 750rpx;
			z-index: 99;

			// .video {
			// 	width: 100%;
			// 	height: 100%;
			// }
			.cover {
				width: 100%;
				height: 100%;
			}

		}

		.cover_img {
			width: 100%;
		}

		// 固定视频播放
		.flexedTop {
			position: fixed;
			margin-top: -5rpx;
		}

		//未购买
		.NoBuy {
			padding: 24rpx 30rpx 24rpx 34rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			&>text {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
				line-height: 22px;
			}

			.flexed {
				display: flex;
				align-items: baseline;

				.box {
					display: flex;
					align-items: baseline;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ffdc50;
					margin-right: 34rpx;

					&>text {
						color: #ffffff;
					}

					.price1 {
						height: 22rpx;
						display: flex;
						align-items: baseline;
						font-size: 28rpx;

						&>text {
							font-size: 26rpx;
						}
					}

					.price2 {
						display: flex;
						align-items: baseline;
						font-size: 32rpx;

						&>text {
							font-size: 26rpx;
						}
					}
				}
			}
		}


		.border_bottom {
			// border-bottom: 2rpx solid #dfdfdf;
		}

		.title_box {
			padding: 27rpx 17rpx 30rpx 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 900;

			&>text {
				width: 780rpx;
				height: 84rpx;
				font-size: 34rpx;
				font-weight: 700;
				color: #111111;
				line-height: 52rpx;
				font-size: 17px;
				font-family: Source Han Sans CN;
			}

			.iconBox {
				display: flex;
				font-size: 28rpx;
				font-weight: 400;
				color: #818181;
				margin-top: 30rpx;

				// line-height: 15px;
				.icon_flex {
					display: flex;
					align-items: center;
					margin-right: 48rpx;

					&>image {
						width: 34rpx;
						height: 34rpx;
						margin-right: 6rpx;
					}

					.act {
						color: #ff8809;
					}
				}

				.icon_flex1 {
					display: flex;
					align-items: center;

					&>image {
						width: 34rpx;
						height: 34rpx;
					}

					&>text {
						margin-right: 6rpx;
					}

					.color1 {
						color: #52a3ff;
					}
				}
			}
		}

		.introduce {
			width: 92%;
			box-sizing: border-box;
			margin: 0 auto;
			color: #939393;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 44rpx;
			position: relative;

			&>image {
				width: 28rpx;
				height: 14rpx;
				position: absolute;
				top: -14rpx;
				right: 54rpx;
			}
		}

		.couseBox {
			padding: 0rpx 30rpx 90rpx;


			.teacher {
				width: 100%;

				.user {
					margin-top: 35rpx;
					background: #fff;
					font-size: 14px;
					font-family: PingFang SC;
					font-weight: 500;
					color: #939393;
					line-height: 22px;
					padding: 30rpx 54rpx 28rpx 26rpx;
					display: flex;
					box-shadow: 0px 3px 13px 0px rgba(127, 129, 133, 0.1000);
					border-radius: 20rpx;

					.avatar {
						width: 140rpx;
						height: 140rpx;
						border-radius: 10rpx;
						// overflow: hidden;
					}

					.right {
						// width: 100%;
						padding-left: 32rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.fristBox {
							display: flex;
							align-items: center;
							font-size: 30rpx;
							font-family: Source Han Sans CN;
							font-weight: 600;
							color: #111111;

							.right1 {
								margin-left: 26rpx;
								width: 112rpx;
								height: 42rpx;
								background: rgba(82, 196, 255, 0.12);
								border-radius: 10rpx;
								text-align: center;
								line-height: 42rpx;
								font-size: 24rpx;
								color: #52a3ff;
							}
						}

						.secondBox {
								width: 438rpx;
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #939393;
								line-height: 44rpx;
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
						}
					}
				}
			}
			.seriesCourses{
				
			}
			.centerBox {
				.graphic {
					.box {
						width: 100%;
						background: #fff;
						box-sizing: border-box;
						// padding: 36rpx 32rpx 52rpx 32rpx;
						padding: 16rpx 32rpx 14rpx 32rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						white-space: pre-wrap;
						color: #939393;
						line-height: 44rpx;
						border-radius: 20rpx;
						box-shadow: 0px 3px 13px 0px rgba(127, 129, 133, 0.1);
					}
				}

				.attachment {
					.tool {
						width: 100%;
						padding: 16rpx 32rpx 14rpx 32rpx;
						background: #fff;
						border-radius: 20rpx;
						box-shadow: 0px 3px 13px 0px rgba(127, 129, 133, 0.1);
						font-size: 30rpx;
						color: #939393;
						display: flex;
						flex-wrap: nowrap;
						overflow-x: auto;
						box-sizing: border-box;

						.att_box {
							max-width: 126rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							font-size: 26rpx;
							color: #303030;
							overflow: hidden; //溢出内容隐藏
							margin-right: 30rpx;

							&>image {
								width: 66rpx;
								height: 79rpx;
								margin-bottom: 22rpx;
							}

							.att_name {
								width: 100%;
								font-size: 26rpx;
								color: #303030;
								display: flex;

								.be {
									flex: 1;
									text-overflow: ellipsis;
									overflow: hidden; //溢出内容隐藏
									display: -webkit-box; //特别显示模式
									-webkit-line-clamp: 1; //行数
									line-clamp: 1;
									-webkit-box-orient: vertical; //盒子中内容竖直排列
								}

								.af {
									flex: 1;
								}
							}
						}

					}
				}
			}

			.recommend {
				padding-bottom: 10rpx;

				.box1 {
					width: 100%;
					padding: 16rpx 64rpx 14rpx 26rpx;
					box-sizing: border-box;
					background: #fff;
					border-radius: 20rpx;
					box-shadow: 0px 3px 13px 0px rgba(127, 129, 133, 0.1);
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					// color: #434343;
					color: #939393;
				}

				.box {
					width: 100%;
					padding: 16rpx 64rpx 14rpx 26rpx;
					background: #fff;
					border-radius: 20rpx;
					box-shadow: 0px 3px 13px 0px rgba(127, 129, 133, 0.1);

					.item {
						display: flex;
						align-items: center;
						margin: 22rpx 0;

						&>image {
							width: 28rpx;
							height: 24rpx;
							margin-right: 10rpx;
						}

						.text {
							width: 100%;
							font-size: 30rpx;
							font-family: Source Han Sans CN;
							color: #434343;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}

		.discuss {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 53vh;

			.discuss_box {
				flex: 1;
				overflow: hidden;
			}
		}
	}

	.act_bgf {
		background-color: #ffffff;
	}
	.icon_flex_infront{
		border:1px solid #F7F7F7;
		height:70rpx;
		width:263rpx;
		text-align:center;
		line-height:2.5;
		color: #919191;
		background:#F7F7F7;
		border-radius:35rpx;
		font-weight: 200;
		display: flex;
		&>image {
			margin-top: 23rpx;
			width: 34rpx;
			height: 34rpx;
			margin-right: 11rpx;
			margin-left: 30rpx;
		}
	}
	.bottom_buttonGroup{
		.iconBox {
			display: flex;
			font-size: 24rpx;
			font-weight: 200;
			color: #818181;
			margin-top: 30rpx;
			justify-content: flex-end;
			margin-right: 20rpx;
			// line-height: 15px;
			.icon_flex {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 30rpx;
		
				&>image {
					width: 34rpx;
					height: 34rpx;
					margin-right: 6rpx;
				}
		
				.act {
					color: #52a3ff;
				}
			}
		}
	}
	.replyPopup {
		width: 100%;
		padding: 30rpx 0;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.inputbg {
			width: 80%;
			height: 80rpx;
			background: #f5f5f5;
			border-radius: 14rpx;
			display: flex;
			align-items: center;
			padding: 0 32rpx;

			.inpt {
				width: 100%;
				height: 100%;
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				color: #9f9f9f;
			}

			.placeholder {
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				color: #9f9f9f;
			}
		}

		&>text {
			font-size: 26rpx;
			padding: 0 10rpx;
			font-family: Source Han Sans CN;
			color: #52a3ff;
		}
	}

	#courseGraphicEndTracingPoint {
		color: #ffffff;
		opacity: 0;
	}

	// 系列课程
	.list_ul{
		width: 100%;
		white-space: nowrap;
		.list_li{
			display: inline-flex;
			flex-direction: column;
			width: 263.5rpx;
			height: 110rpx;
			box-sizing: border-box;
			padding:9rpx 10rpx;
			border-radius: 14rpx;
			background: #fff;
			margin-right: 20rpx;
			.li_block{
				display: flex;
			}
			.li_img_view{
				width: 90rpx;
				height: 90rpx;
			}
			.li_img{
				width: 90rpx;
				height: 90rpx;
				border-radius: 6rpx;
			}
			.li_title{
				padding:20rpx 20rpx 8rpx 8rpx;
				width: 168rpx;
					
				height: 106rpx;
				&>view{
					width: 100%;
					&.title{
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
						word-break: break-all;
						white-space: normal;
						font-size: 24rpx;
						color:#111111;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>
